<template>
  <div class="home">
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item
        v-for="lunbo in lunbolist"
        :key="lunbo.id"
      ><img :src="lunbo.img" /></van-swipe-item>
    </van-swipe>
    <van-grid :column-num="3">
      <van-grid-item
        v-for="grid in gridlist"
        :key="grid.id"
        :icon="grid.src"
        :text="grid.title"
        :to="grid.to"
      />
    </van-grid>
  </div>
</template>
<script>
export default {
  data: () => ({
    lunbolist: [],
    gridlist: []
  }),
  created() {
    this.getLunbo()
    this.getGrid()
  },
  methods: {
    async getLunbo() {
      const res = await this.$http.getLunbo()
      this.lunbolist = res
    },
    async getGrid() {
      const res = await this.$http.getGrid()
      this.gridlist = res
    }
  }
}
</script>
<style lang="less" scoped>
.my-swipe {
  height: 200px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>